<template>
    <div id="p_market" class="p_task">
        <sort-list v-on:select="onSelectSort"></sort-list>
        <group>
            <div v-if="tasks.length==0" style="text-align:center;" ><img src="/static/z39h5/img/none.png" width="200" /></div>
            <swipeout>
                <swipeout-item v-if="index<pageShowNum" @on-open="actionOpen(item, index,2)" v-for="(item, index) in tasks" :key="index" ref="action" >
                    <div slot="right-menu">
                        <swipeout-button @click.native="goTask(item,index)" type="primary">详情</swipeout-button>
                        <swipeout-button @click.native="onDelClick(item,index)" type="default">取消</swipeout-button>
                    </div>
                    <div slot="left-menu">
                        <swipeout-button type="primary">{{item.state!='done'?'完成':'取消完成'}}</swipeout-button>
                    </div>
                    <div slot="content" class="vux-1px-t" v-bind:class="{task_going:item.state=='started',task_done:item.state=='done',task_toggle:item.state=='toggle',task_cancle:item.state=='cancelled',task_curr: taskCurr == item}">
                        <cell @click.native="onEdit(item,index)" :tags="item.tags" :title="showTaskTitle(item)" :value="item.duration" :inline-desc="item.state!=''?showTaskDesc1(item):item.desc">
                            <div slot="icon">
                                  <img :src="showIcons(item)" style="width:50px;height:50px;"/>
                                  <span class="taskCount">{{index+1 + "/" + tasks.length }}</span>
                              </div>
                        </cell>
                    </div>
                </swipeout-item>
            </swipeout>

        </group>

    <actionsheet v-model="showEditBtn" :menus="asBtnCurr" show-cancel @on-click-menu="chooseEdit"></actionsheet>
    </div>
</template>
<script>
import moment from "moment";

import SortList from "./SortList.vue" ;
import { taskAndTag  } from "./mixin";
import { help  } from "./mixinApp";

import api from '../api';
import {
    mapState,
    mapActions
} from 'vuex'

import {
    Scroller,Group,Cell,Swipeout,SwipeoutItem,SwipeoutButton,XButton,Actionsheet,
    TransferDomDirective as TransferDom
} from 'vux'

export default {
    directives: {
        TransferDom
    },
    components: {
        SortList,Scroller,Group,Cell,Swipeout,SwipeoutItem,SwipeoutButton,XButton,Actionsheet,
    },
    mixins: [taskAndTag,help],    
    computed: {
        ...mapState({
            uid: state => state.vux.uid,
            sortType: state => state.z39.sortType,
            tagDic: state => state.z39.tagDic,
            taskAll: state => state.z39.taskAll,

        })
    },
    watch: {
        "sortType": function() { 
            console.log("sortType change", this.sortType );
            //this.actionArr = testCallList ;
            document.getElementById("vux_view_box_body").scrollTop = 0 ;
        }
    },
    created() {
        this.initEvt();
    },    
    deactivated:function(){        
        if(this.showEditBtn) this.showEditBtn = false; 
    },
    mounted: function() {
        // console.info("mount");
        
    },
    methods: {        
        getData: function() {
            
        },
        onSelectSort(val){
          // console.log("onSelectSort:",val)
          var sdata = val ;
          // if(_.isEmpty(data)) return this.$vux.toast.show({text:"请选择参数",type: 'warn'});
          // api.tasksGet(sdata).then(data => {
          this.tasksGet(sdata).then(data => {
            if(data.errno >0) return this.$vux.toast.show({text: data.errmsg ,type: 'warn'});
            var tasks = data.tasks ;
              this.showTasks(sdata);
          })
        },
        showTasks(sdata){
              delete sdata.key ;  //删除不需要的数据. 这是传递给服务端使用了2条数据.
              delete sdata.token ;
            console.log("selected:",JSON.stringify(sdata));
            let {state,pid,timeDiff,need} = sdata ;
            var temp = this.taskAll.filter(task=> {
                var tags = task.tags ;
                var res,isState,isPid,isNeed,isTimeDiff,isTag ;
                isState=isPid=isTimeDiff=isNeed=isTag = true ;
                if (state && state != task.state) return false ;
                if (pid && pid != task.pid) return false ;
                if (need && tags.need ){
                    let needs, neede;
                    var tempneed = need.split("-");
                    needs = tempneed[0];
                    if (tempneed.length > 1) neede = tempneed[1];
                    if( tags.need < needs || ( neede && tags.need > neede) ) return false ;
                }
                if (timeDiff){
                    if( timeDiff =='d' && tags.timeDiff ) return false ;  //缺少异动的数据
                    if( timeDiff !='d' && tags.timeDiff.indexOf(timeDiff) ==-1 ) return false ;
                }
                if( sdata.tags ){
                    for(var tag in sdata.tags){
                        var v = sdata.tags[tag] ;
                        if( tag=='due' ){
                            if(!tags.due || tags.due.indexOf(v) == -1) return false ;
                        }else{ // if(tag !='due')
                            if( tags[tag] ==undefined || v != tags[tag] ) return false ;
                        }
                    }
                }
                return true ;
            });
            this.tasks = temp ;
            document.getElementById("vux_view_box_body").scrollTop = 0 ;
            this.pageIndex = 1;
            this.pageShowNum = this.pageIndex * this.pageNumOne ;
            this.pageTotal = temp.length / this.pageNumOne ;

        },
        initEvt(){
            document.getElementById("vux_view_box_body").addEventListener('scroll', this.scrollHandler)
        },
        scrollHandler(){
            var tar = document.getElementById("vux_view_box_body");
            var top = tar.scrollTop ;
            var bottom = tar.scrollHeight - tar.clientHeight -top - 55 ;
            if(bottom <100){
                this.loadNext();
            }
        },
        loadNext(){
            // console.log("loadNext");
            if( this.pageIndex < this.pageTotal ){
                this.pageIndex ++ ;
                this.pageShowNum = this.pageIndex * this.pageNumOne ;
            }else{
            }
        },
        onEdit(item,index){
            this.taskCurr = item ;           
                    this.showEditBtn = true ;
                    this.asBtnCurr = this.getTaskBtns(item) ;

        },
        actionOpen(item,index,option){            
            let dir = "" , target , arrIndex = index ;
            target = this.$refs.action[index] ;
                dir = target.direction ;
            if( dir == "left"){
                if( item.state == "done"){
                    this.doTaskEdit(item,"").then(data => {
                        //this.changePercent();
                    }) ;
                }else{
                    this.doTaskEdit(item,"done",moment().format("YYYY-MM-DD HH:mm")).then(data => {
                        //this.changePercent();
                    }) ;
                }
                setTimeout(() => {
                    target.close();
                }, 200);                
            }
        },
        goTask(item,index){ // 进入任务详情
            this.$router.push(`/taskDetail/${item.id}`) ;
        },
        onDelClick( item, index) {
            console.log(item);
            this.doTaskEdit(item,"cancelled",moment().format("YYYY-MM-DD HH:mm"));
            // api.taskDel({id:item.id});
        },
        ...mapActions([
            
        ])
    },
    data() {
        return {             
            showEditBtn:false ,            
              asBtnCurr:[],
            flagSel: null,
            flagProSel: null,
            tasks:[],
              taskCurr:{title:""},
            pageIndex: 1 ,
            pageTotal: 2 ,
            pageShowNum:15,
            pageNumOne: 15 ,
        }
    }
}

</script>
<style scoped>


.active-tab {
  color: rgb(55, 174, 252) !important;
  border-color: rgb(55, 174, 252) !important;
}

.demo1-item {
    padding: 5px;
    border-radius: 4px;
    margin: 0 0 0 2px;
    min-width: 40px;
    max-width: 100px;
    text-align: center;
    font-size: 12px;
}

.demo1-item-selected {
    background-color: #edeff1;
    color: #e64340 ;
    line-height: 16px;
}
.customChe {
    border: 0px;
    width: 50px;
    text-align: center;
}

.weui-cell img {
    max-width: 100px;
    height: 44px;
    margin-right: 10px;
    width: auto;
}
</style>
<style>
#p_market .weui-cells {
    margin-top: 4px;
}

#p_market .weui-search-bar:before {
    height: 0;
    border-top: 0;
}
#p_market .vux-tab {
    padding:2px 6px ;
    height: 32px;
}
#p_market .vux-tab .vux-tab-item{
    background: #fff;
    line-height: 28px;    font-size: 16px;
}
#p_market .vux-tab .vux-tab-selected {
    background: rgba(0, 169, 255, 0.24);border-radius: 6px;
}



</style>

<style scoped>
    
</style>
